/*
@description 介绍一下自己吧
@author ZhaoliangJi
@param
@time2021-11-12 14:34:12
*/

<template>
  <div>
    <div class="arise-east-border arise-east-introduce">
      <h2>介绍</h2>
      <p>通过本章节你可以了解到 tsinghua-ui 的安装方法和基本使用知识。</p>
      <img :src="picture" alt="" />
    </div>
    <div class="arise-east-border">
      <h2>版本提示</h2>
      <p>你当前浏览的是 tsinghua-ui 2.x 版本 的文档，适用于 Vue 2 开发。</p>
    </div>
    <div class="arise-east-border">
      <h2>安装</h2>
      <p>
        npm 安装 推荐使用 npm 的方式安装，它能更好地和 webpack
        打包工具配合使用。
      </p>
      <div class="arise-east-code">
        <span class="copy" @click="ariseastCopy('npm i tsinghua-ui -S')"
          >复制代码</span
        >
        npm i tsinghua-ui -S
      </div>
      <p>完整引入 在 main.js 中写入以下内容：</p>
      <div class="arise-east-code">
        <span class="copy" @click="ariseastCopy(cypeCode)">复制代码</span>
        <span>
          import tsinghuaUi from 'tsinghua-ui' <br />
          import 'tsinghua-ui/lib/tsinghua.css' <br />
          Vue.use(tsinghuaUi)
        </span>
      </div>
      <p>卸载依赖</p>
      <div class="arise-east-code">
        <span class="copy" @click="ariseastCopy('npm uninstall tsinghua-ui -S')"
          >复制代码</span
        >
        npm uninstall tsinghua-ui -S 
      </div>
    </div>
    <div class="arise-east-border">
      <h2>特性</h2>
      <ul>
        <li>🚀 性能极佳，组件平均体积小于 1KB（min+gzip）</li>
        <li>🚀 65+ 个高质量组件，覆盖移动端主流场景</li>
        <li>💪 使用 TypeScript 编写，提供完整的类型定义</li>
        <li>💪 单元测试覆盖率超过 90%，提供稳定性保障</li>
        <li>📖 提供完善的中英文文档和组件示例</li>
        <li>📖 提供 Sketch 和 Axure 设计资源</li>
        <li>🍭 支持 Vue 2、Vue 3 和微信小程序</li>
        <li>🍭 支持主题定制，内置 700+ 个主题变量</li>
        <li>🍭 支持按需引入和 Tree Shaking</li>
        <li>🍭 支持服务器端渲染</li>
        <li>🌍 支持国际化和语言包定制</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      picture: require("@/assets/logo.png"),
      pictures: require("@/assets/purplelogo.png"),
      cypeCode:
        "import tsinghuaUi from 'tsinghua-ui'; import 'tsinghua-ui/lib/tsinghua.css'; Vue.use(tsinghuaUi);",
    };
  },
  created() {
    //初始化清空时光轴 => 预防没有锚点页面
    this.$store._mutations.TSINGHUA_ID[0]({});
  },
  mounted() {
    //生成id => 为锚点跳转做铺垫
    this.$store._actions.addElementId[0]();
  },
};
</script>

<style scoped>
.arise-east-introduce {
  text-align: center;
}
</style>
